<template>
  <div class="element1">
    <div style="width: 98%;height:840px;background-color: #061F33;margin: 2% 2% 2% 2%">
      <!--      <div class="tips">-->
      <!--        <span>{{ titlename }}</span>-->
      <!--      </div>-->
      <div style="width: 95%;height:100%;background-color: #061F33;display: flex;flex-direction: column;flex-wrap: wrap; justify-content: space-between;align-items: center;margin: 1% 1% 1% 1%;padding: 12% 10% 10% 10%">
        <template v-for="(item, index) in sampleArray">
          <template v-if="index <6">
            <div :key="item" style="width: 30%;height: 16%;margin-right:0.5%; display: flex;flex-direction: row; justify-content: center">
              <div style="width:28%;color:white;font-size:10pt;margin-top: 4%">{{ labelarr[index] }}</div>
              <div style="width:70%;height:30px;color:white;border-style:solid;border-color:#243c78;margin:2% 5% 2% 5% ;text-align:center;position: relative">
                <p style="position: absolute;bottom: 0px;margin:0px;text-align: center;width: 100%">{{ item }}</p>
              </div>
            </div>
          </template>
          <template v-else-if="index >=6&&index <15">
            <div :key="item" style="width: 30%;height: 11%;margin-right:0.5%; display: flex;flex-direction: row; justify-content: center">
              <div style="width:28%;color:white;font-size:10pt;margin-top: 4%">{{ labelarr[index] }}</div>
              <div style="width:70%;height:30px;color:white;border-style:solid;border-color:#243c78;margin:2% 5% 2% 5% ;text-align:center;position: relative">
                <p style="position: absolute;bottom: 0px;margin:0px;text-align: center;width: 100%">{{ item }}</p>
              </div>
            </div>
          </template>
          <template v-else="">
            <div :key="item" style="width: 30%;height: 11%;margin-right:0.5%; display: flex;flex-direction: row; justify-content: center">
              <div style="width:28%;color:white;font-size:10pt;margin-top: 4%">{{ labelarr[index] }}</div>
              <div style="width:70%;height:30px;color:white;border-style:solid;border-color:#243c78;margin:2% 5% 2% 5% ;text-align:center;position: relative">
                <p style="position: absolute;bottom: 0px;margin:0px;text-align: center;width: 100%">{{ item }}</p>
              </div>
            </div>
          </template>
        </template>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Myspareparts',
  props: {
    sampleArray: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop

      default: () => ['晶闸管', 'TCE', '铂电极', '水管', '电阻', '电容', 'FCK213_IO', 'FCK213_MC', 'FCK213_LE', 'FCK213_LR',
        'FCK215_IO', 'FCK215_MC', 'FCK215_LE', 'FCK215_VML', 'FCK215_SUR', 'FCK211_电源', 'FCK211_CPU', 'FCK211_DIO',
        'FCK211_7I1O', 'FCK211_1I60'],
      required: false

    },
    titlename: {
      type: String,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: () => '1',
      required: false
    }
  },
  data() {
    return {
      labelarr: ['晶闸管', 'TCE', '铂电极', '水管', '电阻', '电容', 'FCK213_IO', 'FCK213_MC', 'FCK213_LE', 'FCK213_LR',
        'FCK215_IO', 'FCK215_MC', 'FCK215_LE', 'FCK215_VML', 'FCK215_SUR', 'FCK211_电源', 'FCK211_CPU', 'FCK211_DIO',
        'FCK211_7I1O', 'FCK211_1I60']
    }
  }
}
</script>

<style lang="scss" scoped>
.tips{
  width: 100%;
  height: 30px;
  display: flex;
  /* justify-content: space-around;
  align-items: center; */
  color: rgb(6,203,255);
  text-align: left;
  text-indent: 10px;
  line-height: 40px;
}
</style>
